// 密码页面
import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import NavBarCom1 from './NarBarCom1'
import { Button, Input, Form, Toast } from 'react-vant'
import { doFinishRegister } from '@/api/design'
type Props = {}

export default function Step3(props: Props) {
    const navigate = useNavigate()
    const [show1, setShow1] = useState(true)
    const reg = /^.*(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*?])\w{5,}/;  //密码校验规则
    const [form] = Form.useForm()
    // 密码输入的值发生改变，提交按钮能不能点击事件
    const changeFn = (val: any) => {
        console.log(val);  //密码输入的值
        if (reg.test(val)) {
            setShow1(false) //可以点击按钮了
        }
    }
    // 表单提交事件
    const onFinish = (values: any) => {
        console.log('values', values) //值是{password: 'xT000727！@'}
        doFinishRegister({ tel: localStorage.getItem('tel'), password: values.password }).then((res) => {
            console.log('密码注册', res);
            if (res.data.code == '200') {
                // 注册成功，提示，并且跳到登录页
                Toast({
                    type: 'success',
                    message: '注册成功',
                    position: 'top',
                })
                navigate('/login')
            }
        })
    }

    return (
        <div>
            <NavBarCom1>京东注册-密码</NavBarCom1>
            <Form
                form={form}
                onFinish={onFinish}
                footer={
                    <div style={{ margin: '16px 16px 0' }}>
                        <Button round nativeType='submit' type='primary' block disabled={show1}>
                            完成
                        </Button>
                    </div>
                }
            >
                <Form.Item
                    rules={[{ required: true, message: '请填写密码' }]}
                    name='password'
                    label='密码'
                >
                    <Input placeholder='密码:至少6位,包含大小写字母、数字、特殊字符' onChange={changeFn} />
                </Form.Item>
            </Form>

        </div>
    )
}